<template>
  <el-select
    v-model="backups.agentName"
    clearable
    class="inputStyle"
    placeholder="请选择所属机构"
  >
    <el-option class="tree" :value="value">
      <el-tree
        :data="treeData"
        :props="defaultProps"
        @node-click="subsidiaryOrgan"
      />
    </el-option>
  </el-select>
</template>

<script>
import { getTreeDataAPI } from '@/api/vehicle'
export default {
  props: {
    value: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      backups: {
        agentName: ''
      }
    }
  },
  created() {
    this.getTreeData()
  },
  methods: {
    // 机构树形数据
    async getTreeData() {
      const { data } = await getTreeDataAPI()
      this.treeData = JSON.parse(data.data)
    },
    // 机构选择
    subsidiaryOrgan(item) {
      this.$emit('input', item.id)
      this.backups.agentName = item.name
    }
  }
}
</script>

<style lang="scss" scoped>
// test
.tree {
  padding: 0;
  height: auto;
  overflow: auto;
  // 滚动条
  &::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
}
</style>
